<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="referrer" content="no-referrer">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--    <link th:href="@{/css/navs.css}" rel="stylesheet">-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <!--文件上传插件-->
    <link rel="stylesheet" th:href="@{/plugins/easyUpload.js/easy-upload.css}">
    <script th:src="@{/plugins/easyUpload.js/vendor/jquery.cookie-1.4.1.min.js}"></script>
    <script th:src="@{/plugins/easyUpload.js/easyUpload.js}"></script>

    <!--    录音-->
    <script th:src="@{//plugins/webSoundrecording/webSound/recorder.js}"></script>
    <link rel="stylesheet" th:href="@{/plugins/webSoundrecording/microphone.css}"/>
    <script th:src="@{//plugins/webSoundrecording/microphone.js}"></script>

    <link rel="stylesheet" th:href="@{/css/index.css}"/>

<!--    <style>
        body {
            background-color: #e6e5e5;
        }

        .mycontainer {
            margin-top: 200px;
        }

        .class-type {
            margin-bottom: 20px;
        }

        .training-set {
            height: 200px;
            /*border: black 1px solid;*/
            border-radius: 10px;
            background-color: white;
        }

        .training-body {
            height: 200px;
            /*border: black 1px solid;*/
            border-radius: 10px;
            background-color: white;
        }

        .training-set-top {
            height: 50px;
            /*border-bottom: 1px solid #eee;*/
        }

        input {
            border: 0;
            font-size: 14px;
            /*outline: none;*/
            background-color: rgba(0, 0, 0, 0);

        }

        hr {
            margin-top: 10px;
            margin-bottom: 10px;
            border: 0;
            border-top: 1px solid #eee;
        }

        .training-set-top-left-input {
            margin-top: 10px;
            margin-left: 20px;
            display: inline-block;
            height: 50px;
            width: 60px;
        }

        button {
            border: none;
            /*font-size: 14px;*/
            outline: none;
            background-color: rgba(0, 0, 0, 0);
        }

        .training-set-top-right {
            margin-top: 25px;
        }

        .training-set-button {
            width: auto;
            /*height: auto;*/
            font-size: 20px;
            /*height: 200px;*/
        }

        .training-set-button-button-shape {
            width: 90px;
            height: 90px;
            margin-left: 15px;
            background-color: #8AB4F8;
            border-radius: 10px;
            color: #1967D2;
        }

        .training-set-button-button-shape :hover {

        }

        .training-set-button-button-shape-fone {
            font-size: 14px;
        }

        .add-class {
            margin-top: 20px;
            border: 3px dashed #BDC1C6;
            height: 100px;
            padding: 30px;
            border-radius: 10px;
        }

        .add-class:hover {
            border: #8AB4F8 3px dashed;
        }

        /*   .add-class:after{
               border: none;
           }*/
        .new_training-set {
            margin-top: 200px;
        }

        input[type=button] {
            background: #1AB5FF;
            color: #fff;
            border-radius: 6px;
            font-size: 12px;
            margin: 10px;
            border: none;
            padding: 8px 15px;
            cursor: pointer;
        }

        input[type=button]:hover {
            background: #0091ff;
        }


    </style>-->

</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
    <div class="mycontainer">
        <div class="row class-type" id="class-type">
            <div class="col-md-1 "></div>
            <div class="col-md-3 training-set">
                <div class="training-set-top">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="training-set-top-left">
                                <input type="text" name="" id="class-input" value="CLASS"
                                       class="training-set-top-left-input ">
                                <button class="glyphicon glyphicon-pencil button" onclick="setText()"></button>
                            </div>
                        </div>
                        <div class="col-md-6"></div>
                        <div class="col-md-2">
                            <button class="training-set-top-right ">
                                <!--                            <span class="glyphicon glyphicon-remove"></span>-->
                            </button>
                        </div>
                    </div>

                </div>
                <!--        分界线-->
                <hr class="set-split">
                <div class="training-set-button">
                    <span>ADD Audio Samples :</span>
                    <div class="training-set-button-button row">
                        <button class="col-md-2 training-set-button-button-shape" data-toggle="modal"
                                data-target=".bs-example-modal-mic">
                    <span class="glyphicon glyphicon-facetime-video " align=“center”>
                        <br>
                        <div class="training-set-button-button-shape-fone">Mic</div>
                    </span>
                        </button>
                        <button class="col-md-2 training-set-button-button-shape " id="up_btn" data-toggle="modal"
                                data-target=".bs-example-modal-lg">
                    <span class="glyphicon glyphicon-open" align=“center”>
                        <br>
                        <div class="training-set-button-button-shape-fone">up</div>
                    </span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-1">
                <br>
                <div class="row" style="margin-left: 10px">
                    <div class="col-md-12">
                        <div class="glyphicon glyphicon-arrow-right" style="width: 50px"></div>
                    </div>

                </div>
            </div>
            <div class="col-md-3">
                <div class="training-body">
                    <div class="row training-set-top">
                        <br>
                        <div class="col-md-1"></div>
                        <div class="col-md-8 ">Training</div>
                    </div>
                    <hr class="set-split">
                    <br>
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <input type="submit" value="开始训练"></input>
                        </div>
                        <div class="col-md-4"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>


<!--录音-->
<div class="modal fade bs-example-modal-mic" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <br>
            <br>
            <P style="margin-left: 50px">请打开您的麦克风才能看到效果</P>
            <input type="button" value="开始录音" onclick="Start()"/>
            <input type="button" value="结束录音" onclick="Stop()"/>
            <div id="len" style="color:#ff6600;display:inline-block;">录音时长：0.00s</div>
            <div id="loud" style="color:#ff6600;display:inline-block;margin-left:15px;">录音时长：0%</div>
            <input type="button" value="下载音频" onclick="download()"/>
            <h3>录音动画效果</h3>
            <div style="width:180px;height:180px;padding:20px">
                <div id="Microphone"></div>
            </div>
        </div>
    </div>
</div>

<!--文件上传-->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div id="easyContainer"></div>
            <script>
                $('#easyContainer').easyUpload({
                    allowFileTypes: '*.wav;*.png;*.jpeg;*.mp3',//允许上传文件类型，格式';*.doc;*.pdf'
                    allowFileSize: 1024 * 2014 * 100,//允许上传文件大小(KB)
                    selectText: '选择文件',//选择文件按钮文案
                    multi: true,//是否允许多文件上传
                    multiNum: 10,//多文件上传时允许的文件数
                    showNote: true,//是否展示文件上传说明
                    note: '提示：最多上传10个文件，支持格式为wav、mp3',//文件上传说明
                    showPreview: true,//是否显示文件预览
                    //后台处理
                    url: "[(@{/add})]",// 后台url 上传文件地址
                    fileName: 'imgFile',//文件filename配置参数
                    formParam: {
                        /*  token: $.cookie('token_cookie') *///不需要验证token时可以去掉
                    },//文件filename以外的配置参数，格式：{key1:value1,key2:value2}
                    timeout: 30000,//请求超时时间
                    successFunc: function (res) {
                        //res  json格式   成功code  200
                        console.log('成功回调', res);
                    },//上传成功回调函数
                    errorFunc: function (res) {
                        console.log('失败回调', res);
                    },//上传失败回调函数
                    deleteFunc: function (res) {
                        console.log('删除回调', res);
                    }//删除文件回调函数
                });
            </script>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-1 "></div>
    <button class="col-md-3 add-class" id="add-class-btn">
        <div class="glyphicon glyphicon-plus "> Add a class</div>
    </button>

</div>


<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(".delete-class-btn").click(function () {
        alert(this)
        $(".class-type").hide()
    })
</script>
<!--处理声音-->
<script>
    var recorder = new Recorder({
        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        numChannels: 1, // 声道，支持 1 或 2， 默认是1
        compiling: false, // 是否边录边转换，默认是false
    });

    function isIE() { //ie?
        if (!!window.ActiveXObject || "ActiveXObject" in window)
            return true;
        else
            return false;
    }

    var Start = function () {
        if (isIE()) {
            alert("ie不支持麦克风录音，请更换浏览器！");
        } else {
            recorder.start().then(() => {
                Length();
                //Loud();
                // 开始录音
            }, (error) => {
                // 出错了
                console.log(`${error.name} : ${error.message}`);
            });
        }
    }
    var Stop = function () {
        recorder.stop();
    }
    var Length = function () {
        recorder.onprogress = function (params) {
            var id = document.getElementById("len");
            id.innerHTML = "录音时长：" + params.duration.toFixed(2);
            var idx = document.getElementById("loud");
            idx.innerHTML = "音量大小：" + params.vol.toFixed(0) + "%";
            microphone.volume("Microphone", params.vol);
        }
    }
    var Play = function () {
        recorder.play();
        PlayDur();
    }
    var PlayDur = function () {
        var id = document.getElementById("playTiem");
        id.innerHTML = "音频总时长" + recorder.duration;

        setInterval(function () {
            var idx = document.getElementById("playTime");
            idx.innerHTML = "播放进度" + recorder.getPlayTime();
        }, 1000)

    }
    var download = function () {
        recorder.downloadWAV("video");
    }
</script>

<!--add a class-->
<script>
    $("#add-class-btn").click(function () {
        var i = 0;
        $(".mycontainer").append(" <div class=\"row class-type\">\n" +
            "        <div class=\"col-md-1 \"></div>\n" +
            "        <div class=\"col-md-3 training-set\">\n" +
            "            <div class=\"training-set-top\">\n" +
            "                <div class=\"row\">\n" +
            "                    <div class=\"col-md-4\">\n" +
            "                        <div class=\"training-set-top-left\">\n" +
            "                            <input type=\"text\" name=\"\" id=\"class-input\" value=\"CLASS\" class=\"training-set-top-left-input \">\n" +
            "                            <button class=\"glyphicon glyphicon-pencil button\" onclick=\"setText()\"></button>\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "                    <div class=\"col-md-6\"></div>\n" +
            "                    <div class=\"col-md-2\">\n" +
            "                        <button class=\"training-set-top-right delete-class-btn\">\n" +
            "                            <span class=\"glyphicon glyphicon-remove\"></span>\n" +
            "                        </button>\n" +
            "                    </div>\n" +
            "                </div>\n" +
            "\n" +
            "            </div>\n" +
            "            <!--        分界线-->\n" +
            "            <hr class=\"set-split\">\n" +
            "            <div class=\"training-set-button\">\n" +
            "                <span>ADD Audio Samples :</span>\n" +
            "                <div class=\"training-set-button-button row\">\n" +
            "                    <button class=\"col-md-2 training-set-button-button-shape\"  data-toggle=\"modal\" data-target=\".bs-example-modal-mic\">\n" +
            "                    <span class=\"glyphicon glyphicon-facetime-video \" align=“center” >\n" +
            "                        <br>\n" +
            "                        <div class=\"training-set-button-button-shape-fone\">Mic</div>\n" +
            "                    </span>\n" +
            "                    </button>\n" +
            "                    <button class=\"col-md-2 training-set-button-button-shape \" id=\"up_btn\" data-toggle=\"modal\" data-target=\".bs-example-modal-lg\">\n" +
            "                    <span class=\"glyphicon glyphicon-open\" align=“center”>\n" +
            "                        <br>\n" +
            "                        <div class=\"training-set-button-button-shape-fone\">up</div>\n" +
            "                    </span>\n" +
            "                    </button>\n" +
            "                </div>\n" +
            "            </div>\n" +
            "        </div>\n" +
            "    </div>")
    })
</script>

</body>
</html>